import SelectMoreComps from "./SelectMoreComps.js";
import ButtonComs from "./ButtonComs";
import Icon from "@ui/RJMart/icons";

export default class Specification extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lists: [

            ],
            multiply: false,
            open: false,
            selcted_one: -1
        };

        this.choosed_specifications = [];

    }

    selectMulti(type, item) {
        if (type == "push") {
            this.choosed_specifications.push(item)

        } else if (type == "splice") {
            let list= this.choosed_specifications.filter((specification)=>{
                return  specification!=item
            })

            this.choosed_specifications=list

        }
    }


    setSpecifications(){
        const {setSpecification}=this.props
        let levelStr=this.choosed_specifications.join(',')
        let levelIds=this.choosed_specifications

        setSpecification(levelStr,levelIds)
    }

    clearSpecifications(){
        this.choosed_specifications=[]
    }

    render() {
        const { lists, multiply, open } = this.state;
        const { specifications,setSpecification } = this.props;
        return (
            <div
                className={
                    (multiply||open)
                        ? "search-page-select-specification1"
                        : "search-page-select-specification"
                }
            >
                <div className={"search-page-select-brand-2"}>
                    <p>规格</p>
                </div>
                <div className={"search-page-select-brand-wrapper"}>
                    <div
                        className={
                            (multiply||open)
                                ? "search-page-select-category-list1"
                                : "search-page-select-category-list"
                        }
                    >
                        {specifications&&
                        specifications.map((item, index) => {
                            return (
                                <TextItem
                                    multiply={multiply}
                                    open={open}
                                    key={index}
                                    index={index}
                                    item={item}
                                    selectMulti={type =>
                                        this.selectMulti(type, item)
                                    }
                                    selectOne={()=>{
                                        setSpecification(item,[item])
                                    }}
                                />
                            );
                        })}
                    </div>
                    {(multiply||open) && <div style={{ height: 15 }} />}
                    {multiply && (
                        <ButtonComs
                            isSupp={true}
                            onConfirm={() => {
                                this.setState({
                                    multiply: false
                                });
                                this.setSpecifications()
                            }}
                            onCancle={() => {
                                this.setState({
                                    multiply: false
                                });
                                this.clearSpecifications()
                            }}
                        />
                    )}
                </div>
                {
                    specifications&&specifications.length>1&&(
                        <SelectMoreComps
                            minWidth={true}
                            open={open}
                            multiply={multiply}
                            lists={specifications}
                            setOpen={open => {
                                this.setState({
                                    open
                                });
                            }}
                            setMultiply={multiply => {
                                this.setState({
                                    multiply,
                                });
                            }}
                        />
                    )
                }


            </div>
        );
    }
}

class TextItem extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (
            nextProps.multiply != this.props.multiply ||
            nextProps.item != this.props.item
        ) {
            this.setState({
                selected: false
            });
        }
    }

    render() {
        const { item, multiply, open, selectMulti,selectOne } = this.props;

        const isOpen = multiply || open;
        const { selected } = this.state;
        // console.log(isOpen);
        return (
            <div
                className={
                    isOpen
                        ? "search-page-select-category-item1"
                        : "search-page-select-category-item"
                }
                onClick={() => {
                    if (multiply) {
                        if (selected) {
                            selectMulti("splice");
                        } else {
                            selectMulti("push");
                        }
                        this.setState({
                            selected: !selected
                        });
                        return;
                    }
                    selectOne()
                }}
            >
                {multiply &&
                (selected ? (
                    <div className={"search-page-select-item-gouxuan1"}>
                        <Icon
                            type={"check"}
                            color={"#0093EB"}
                            size={"small"}
                            width={16}
                            height={16}
                            style={{ marginTop: -8, marginLeft:-1}}
                        />
                    </div>
                ) : (
                    <div className={"search-page-select-item-gouxuan"} />
                ))}
                <p
                    className={
                        selected
                            ? "search-page-select-category-item-p1"
                            : "search-page-select-category-item-p"
                    }
                >
                    {item}
                </p>
            </div>
        );
    }
}
